<template>
  <div ref="editorRef"></div>
  
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import E from 'wangeditor';

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
const editorRef = ref(null);
let editor = null;

onMounted(() => {
  if (editorRef.value) {
    editor = new E(editorRef.value);
    const menuItem = [
      //工具栏里有哪些工具
      'head', // 标题
      'bold', // 粗体
      'fontSize', //字号
      'fontName', //字体
      'italic', // 斜体
      'underline', //下划线
      'strikeThrough', //删除线
      'indent', //缩进
      'lineHeight', //行高
      'foreColor', //文字颜色
      'backColor', //文字背景颜色
      'justify', // 对齐方式
      'undo', //撤销
      'redo' //恢复
    ]

    editor.config.menus = [...menuItem] /* 应用设置好的工具栏 */

    editor.config.colors = [
      '#000000',
      '#eeece0',
      '#1c487f',
      '#4d80bf'
    ] /* 文字颜色、背景色可以选择哪些颜色? */

    editor.config.fontNames = [
    /* 字体工具提供哪些字体? */ '黑体',
      '仿宋',
      '楷体',
      '标楷体',
      '华文仿宋',
      '华文楷体',
      '宋体',
      '微软雅黑'
    ]
    editor.config.height = 300 //你可能发现这个编辑器是没法用样式调高度的?
    editor.config.onchange = (newHtml) => {
      emit('update:modelValue', newHtml); // 更新 v-model 的值
    };
    editor.create();
    editor.txt.html(props.modelValue); // 设置初始内容

    //以下为新增

  }
});

watch(() => props.modelValue, (newValue) => {
  if (editor && newValue !== editor.txt.html()) { // 防止重复设置相同内容导致的问题
    editor.txt.html(newValue); // 监听外部变化并更新编辑器内容
  }
});

</script>